<template>
    <v-app style="background: #f7f9fb">
        <v-snackbar
                timeout="3000"
                v-model="bar"
        >
            请检查表单信息！
            <template v-slot:action="{ attrs }">
                <v-btn
                        color="pink"
                        text
                        v-bind="attrs"
                        @click="bar = false"
                >
                    Close
                </v-btn>
            </template>
        </v-snackbar>
        <center style="margin-top: 10%">
            <div style="font-weight: bold; font-size: x-large">尽心尽力写生活</div>
            <br/>
            <v-card class="login-card">
                <v-card-title>注册</v-card-title>
                <v-form style="width: 85%"
                        ref="form"
                        v-model="valid"
                        lazy-validation
                >
                    <v-text-field outlined dense
                                  color="primary"
                                  v-model="form.name"
                                  :rules="nameRules"
                                  label="用户名"
                                  required
                    ></v-text-field>
                    <v-text-field outlined dense
                                  color="primary"
                                  v-model="form.email"
                                  :rules="emailRules"
                                  label="邮箱"
                                  required
                    ></v-text-field>
                    <v-text-field outlined dense
                                  type="password"
                                  color="primary"
                                  v-model="form.password"
                                  :rules="pwdRules"
                                  label="密码"
                                  required
                    ></v-text-field>
                    <v-text-field outlined dense
                                  color="primary"
                                  v-model="form.img"
                                  :rules="imgRules"
                                  label="头像-以http://或https://开头"
                                  required
                    ></v-text-field>
                    <v-divider></v-divider>
                    <v-radio-group
                            v-model="form.type"
                            row
                            mandatory
                    >
                        <v-radio
                                label="学生"
                                value="1"
                        ></v-radio>
                        <v-radio
                                label="普通用户"
                                value="2"
                        ></v-radio>
                    </v-radio-group>
                    <v-row v-if="form.type==1">
                        <v-col cols="6">
                            <v-text-field outlined dense
                                          color="primary"
                                          v-model="form.sess"
                                          label="届数"
                            ></v-text-field>
                        </v-col>
                        <v-col cols="6">
                            <v-text-field outlined dense
                                          color="primary"
                                          v-model="form.clazz"
                                          label="班级"
                            ></v-text-field>
                        </v-col>
                    </v-row>
                </v-form>
                <v-alert style="width: 85%"
                         color="red"
                         type="error"
                         dense
                         v-if="error"
                >邮箱或用户名已存在</v-alert>
                <br v-if="!error"/>
                <v-btn depressed color="primary" height="42px" width="85%" @click="sign">注册</v-btn>
                <br/>
                <br/>
            </v-card>
            <br/>
            <div style="color: gray">© 2021-present — Daman</div>
            <br/>
        </center>
    </v-app>
</template>

<script>
    export default {
        name: "login",
        data: () => ({
            bar: false,
            valid: true,
            nameRules: [
                v => !!v || '请输入用户名',
            ],
            pwdRules: [
                v => !!v || '请输入密码',
            ],
            imgRules: [
                v => !!v || '请输入头像链接',
            ],
            form: {
                name: '',
                email: '',
                password: '',
                img: '',

                type: 1,
                clazz: '',
                sess: '',
            },
            emailRules: [
                v => !!v || '请输入邮箱',
                v => /.+@.+\..+/.test(v) || '请输入正确的邮箱格式',
            ],
            error: false,
        }),
        created() {

        },
        watch:{
            'form.name': function () {
                this.error = false;
            },
            'form.email': function () {
                this.error = false;
            }
        },
        methods:{
            // 判断非空&删除clazz和sess
            sign(){
                //学生
                if (this.form.type==1) {
                    let s = parseInt(this.form.sess);
                    let c = parseInt(this.form.clazz);
                    if (this.valid && this.form.sess!='' && this.form.clazz!='' && !isNaN(s) && !isNaN(c)) {
                        const t = this;
                        this.userSign(t.form).then(function (resp) {
                            if (resp.data){
                                t.userLogin(t.form).then(function () {
                                    t.$router.push('/');
                                })
                            } else{
                                t.error = true;
                            }
                        })
                    } else{
                        this.bar = true;
                    }
                }
                //用户
                if (this.form.type==2) {
                    if (this.valid){
                        this.form.sess = null;
                        this.form.clazz = null;

                        const t = this;
                        this.userSign(t.form).then(function (resp) {
                            if (resp.data){
                                t.userLogin(t.form).then(function () {
                                    t.$router.push('/');
                                })
                            } else{
                                t.error = true;
                            }
                        })
                    } else{
                        this.bar = true;
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .login-card{
        width: 360px;
    }
    @media screen and (max-width: 600px){
        .login-card{
            width: 90%;
        }
    }
</style>
